還記得我們在之前做過變化模式嗎？
沒錯，就是滑鼠懸停之後會變色的那個。

我們今天呢，就是要來幫它們加上過渡效果和動畫！

今天我們就不多講廢話了，直接開始吧！
 

舊圖重發

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600" tabindex="1">
    2
  </box>
</div>

欸 ...！ 今天這個段落的標題是誰上的！
說什麼舊圖重發 ... 它是看起來長一樣沒錯，
但其實是重新截圖的啊！

啊算了，今天的範本其實跟上次是同一個， 就放在這邊，
快點打開一起跟著做作業吧！

今天的功能也簡單哦～ Let's ... GO！
 

過渡效果 (transition-property)

透過使用 transition-{支援類型} 這個功能，我們可以設定 / 改變 元素支援過渡效果的樣式類型，例如 transition-colors 功能是元素顏色變換時才具有過渡效果，但其他樣式改變時並不會有過渡效果。

以下是預設可以使用的過渡效果功能：

• transition-none
• transition-all
• transition
• transition-colors
• transition-opacity
• transition-shadow
• transition-transform

使用對應的過渡效果可以讓畫面瀏覽起來不那麼耗效能，因為你並不是對每個屬性都開啟過渡效果。

我們這邊來偷懶一下， 為了讓它可以之後不管增加什麼屬性的改變都能夠擁有過渡效果，我們為最外層及兩個方塊都加上 transition-all：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

(啊，就算放圖你們也看不出效果差異，所以就不放了)

加完之後會發現馬上就有過渡效果，整個質感大大大提升！

蛤! 什麼！？ 你說這樣就很不錯了，後面不用介紹了？
別這樣嘛～ 還是要介紹一下啦～

因為有接下來這個功能會讓你更方便、更有質感！
 

過渡效果持續時間 (transition-duration)

透過使用 duration-{支援類型} 這個功能，我們可以設定 / 改變 元素過渡效果的持續時間，例如 duration-1000 功能是將元素過渡效果的持續時間設定為 1000 ms，也就是 1 秒。

以下是預設可以使用的過渡效果持續時間功能：

• duration-75
• duration-100
• duration-150
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000
   

為了感受過渡時間的效果差異，我們在最外層上使用 duration-1000 來使它的過渡效果持續時間比其他人慢很多。(預設是 150 ms)

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

欸，應該 ... 看得出來吧？

好沒關係，接下來再看不出來就 ... 就看不出來啦！
 

過渡效果延遲 (transition-delay)

透過使用 delay-{支援類型} 這個功能，我們可以設定 / 改變 元素過渡效果發生的延遲時間，例如 delay-1000 功能是將元素過渡效果的發生時間延遲 1000 ms，也就是 1 秒。

以下是預設可以使用的過渡效果延遲功能：

• delay-75
• delay-100
• delay-150
• delay-200
• delay-300
• delay-500
• delay-700
• delay-1000
   

用 delay-1000 加在最外層，讓最外層的過渡效果更慢更明顯吧：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

這下總看得出來了！ 摁，你肯定看得出來。

再來，我們就不是要繼續玩過渡效果囉，而是動畫！
 

動畫 (animation)

透過使用 animate-{動畫類型} 這個功能，我們可以設定 / 改變 元素的動畫效果，例如 animate-spin 功能是將元素加上旋轉的動畫。

以下是預設可以使用的動畫功能：

• animate-none
• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

這些動畫功能都是已經預設的動畫組合，而且都是屬於較常用的動畫。

接著來試著把紅色方塊用 animate-bounce 加上彈跳動畫，然後用 animate-pulse 讓藍色方塊具有脈衝效果 (類似閃爍)：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-bounce" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-pulse" tabindex="1">
    2
  </box>
</div>

元素們是不是又更活潑生動了呢！
這樣一來就可以做出很多很棒的應用啦~
 

今天就大概到這邊囉！
請好好休息為下一篇做準備，

因為下一篇 ... 要開始來安裝和設定了！
那可就沒有像前面這麼輕鬆愉快囉～
 

給你們的回家作業：

• 作業實施要點：
  • 試著讓方塊有不同的過渡時間，還有換個更有趣的動畫吧！
• 沉悶的方塊們：帶它們破冰吧！會變得活潑的哦！
• 生動的方塊們：快看！它們現在似乎有點好動！
   

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

兔子小知識

[ 動如脫兔 ]
軍隊行動迅速，像逃脫的兔子一般。語本《孫子集注．卷十一．九地》。後比喻動作十分敏捷。

去百科查了才知道是這個解釋，
但我怎麼看都是罵軍隊撤退逃竄的很快 XD